<template>
  <view class="container">
    <z-paging-swiper v-if="status == 4">
      <view slot="top">
        <u-navbar height="50" title="我的团队" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList"
            @query="queryList"
            :flex="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="" style="padding: 20rpx">
              <view v-if="status == 1" style="background-color: #fff; border-radius: 10rpx">
                <view
                  class=""
                  style="
                    padding: 20rpx;
                    font-size: 32rpx;
                    color: #999999;
                    border-bottom: 1px solid #ededed;
                  "
                >
                  账户记录
                </view>
                <view class="itemView" v-for="(item, index) in itemList" :key="index">
                  <view class="itemHead">
                    <view class="itemTitle">下载收益-来自用户183**99</view>
                    <view class="itemMoney">+8.00</view>
                  </view>
                  <view class="itemTime">
                    <view>2023-09-28 17:32</view>
                  </view>
                </view>
              </view>

              <view v-else style="background-color: #fff; border-radius: 10rpx">
                <view class="itemView2" v-for="(item, index) in itemList" :key="index">
                  <u-avatar src="" size="80"></u-avatar>
                  <view class="" style="margin-left: 15rpx">
                    <view class="itemHead">
                      <view class="itemTitle">183****99</view>
                    </view>
                    <view class="itemTime">
                      <view>邀请时间：2023-09-28 17:32</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging2"
            v-model="itemList2"
            @query="queryList2"
            :flex="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="" style="padding: 20rpx">
              <view v-if="status == 1" style="background-color: #fff; border-radius: 10rpx">
                <view
                  class=""
                  style="
                    padding: 20rpx;
                    font-size: 32rpx;
                    color: #999999;
                    border-bottom: 1px solid #ededed;
                  "
                >
                  账户记录
                </view>
                <view class="itemView" v-for="(item, index) in itemList" :key="index">
                  <view class="itemHead">
                    <view class="itemTitle">下载收益-来自用户183**99</view>
                    <view class="itemMoney">+8.00</view>
                  </view>
                  <view class="itemTime">
                    <view>2023-09-28 17:32</view>
                  </view>
                </view>
              </view>

              <view v-else style="background-color: #fff; border-radius: 10rpx">
                <view class="itemView2" v-for="(item, index) in itemList" :key="index">
                  <u-avatar src="" size="80"></u-avatar>
                  <view class="" style="margin-left: 15rpx; flex: 1">
                    <view class="itemHead">
                      <view class="itemTitle">183****99</view>
                    </view>
                    <view class="itemTime">
                      <view>邀请时间：2023-09-28 17:32</view>
                    </view>
                  </view>
                  <view class="" style="float: right"> 推荐人：张某某 </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>

    <z-paging
      v-else
      ref="paging3"
      v-model="itemList3"
      @query="queryList3"
      :flex="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar height="50" title="推荐收益" title-size="36" title-color="#333"></u-navbar>
        <view class="cs">
          <view class="cs-t"> 账号收益 </view>
          <text class="price"> 2826.00元 </text>
          <view class="w-btn" @click="routeTo('/other/withdrawal/withdrawal')"> 去提现 </view>
        </view>
      </view>
      <u-gap height="20rpx" bg-color="f2f2f2"></u-gap>
      <view class="" style="padding: 20rpx">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view
            class=""
            style="
              padding: 20rpx;
              font-size: 32rpx;
              color: #999999;
              border-bottom: 1px solid #ededed;
            "
          >
            推荐奖励明细
          </view>
          <view class="itemView" v-for="(item, index) in itemList3" :key="index">
            <view class="itemHead">
              <view class="itemTitle">推荐收益-来自直推用户183**99</view>
              <view class="itemMoney">+8.00</view>
            </view>
            <view class="itemTime">
              <view>2023-09-28 17:32</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      status: 1,
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '直推(133)'
        },
        {
          name: '间推(233)'
        }
      ],
      itemList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      itemList2: [{}, {}, {}],
      itemList3: [{}, {}, {}]
    }
  },
  onLoad(options) {
    this.status = options.status
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      let current = e.detail.current
      this.current = current
      this.scurrent = current
      this.$refs.uTabs.setFinishCurrent(current)
      if (this.current != current) {
        this.onOrderLoad(current, null, true)
      }
      this.scurrent = current
      this.current = current
    },
    queryList(page, pageSize) {
      this.$refs.paging.complete(this.itemList)
    },
    queryList2(page, pageSize) {
      this.$refs.paging2.complete(this.itemList)
    },
    queryList3(page, pageSize) {
      this.$refs.paging3.complete(this.itemList)
    },
    onWithdrawal() {
      this.$utils.route('/other/withdrawal/withdrawal')
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
}

.moneyView {
  height: 200rpx;
  background: #fff;
  box-shadow: 0px 4rpx 10rpx 0px rgba(219, 219, 219, 0.42);
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
}

.withdrawal {
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #fdea11;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b65a00;
  margin-left: 40rpx;
}

.tabView {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0px;
}

.itemView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemView2 {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}

.itemTitle {
  flex: 1;
}

.itemTime {
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  margin-top: 15rpx;
}
.cs {
  background-color: #fff;
  padding: 40rpx;
}
.cs-t {
  font-size: 24rpx;
}
.price {
  font-size: 48rpx;
  margin: 20rpx 0;
}
.w-btn {
  display: inline-block;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  background-color: #8cc340;
  color: #fff;
  border-radius: 45rpx;
  margin-left: 30rpx;
}
</style>
